02 - Tipografia

Tipografia

Inter para texto. JetBrains Mono para dados. Uma unica stack tipografica para toda a plataforma.

Font Families

Primary Universal
Inter
A unica fonte que sobreviveu a todas as iteracoes do Design System.
The quick brown fox jumps over the lazy dog Regular 400
The quick brown fox jumps over the lazy dog Medium 500
The quick brown fox jumps over the lazy dog Semibold 600
The quick brown fox jumps over the lazy dog Bold 700
--f-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif
Monospace Data Display
JBMono
Dados numericos, telemetria, codigo, tabelas com alinhamento decimal.
0123456789 ABCDEF Regular 400
0123456789 ABCDEF Medium 500
0123456789 ABCDEF Bold 700
GS
125
KTS
ALT
5,500
FT
HDG
074
DEG
--f-font-mono: 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace

Type Scale

Escala modular com 9 tamanhos. Base = 16px (1rem).

--f-text-5xl
48px / 3rem
Display Text
--f-text-4xl
40px / 2.5rem
Hero Heading
--f-text-3xl
32px / 2rem
Page Heading
--f-text-2xl
24px / 1.5rem
Section Heading
--f-text-xl
20px / 1.25rem
Card Title
--f-text-lg
18px / 1.125rem
Emphasis Text
--f-text-base
16px / 1rem
Body text - the default size for all paragraph text and general content.
--f-text-sm
14px / 0.875rem
Secondary text, labels, helper text, table cells, sidebar items.
--f-text-xs
12px / 0.75rem
CAPTIONS, BADGES, OVERLINES, TIMESTAMPS

Pattern: Label + Value + Unit

O padrao mais usado em ambas as marcas. Label em uppercase tracking-widest, valor em mono bold, unidade em info color.

Akme Sistemas
Projetos
200+
Uptime
99.9
%
Entidades
375
PIM Objects
Smart Navigator
GS
125
KTS
ALT
5,500
FT
HDG
074
DEG

Letter Spacing

--f-tracking-tight
Tight tracking for headings -0.02em
--f-tracking-normal
Normal tracking for body text 0em
--f-tracking-wide
Wide tracking for buttons 0.05em
--f-tracking-widest
Widest for labels 0.1em

Font Weights

Aa
Regular
400
Body, paragraphs
Aa
Medium
500
Labels, nav items
Aa
Semibold
600
Buttons, subtitles
Aa
Bold
700
Headings, values

Regras de Uso

CORRETO
  • ✓ Inter para TODO texto (headings, body, buttons, nav)
  • ✓ JetBrains Mono para dados numericos e codigo
  • ✓ Labels em UPPERCASE + tracking-widest + text-xs
  • ✓ Valores em mono + bold + tamanho proporcional a importancia
  • ✓ Unidades em text-xs + cor info/accent
INCORRETO
  • ✗ Usar Roboto em novas paginas (migrado para Inter)
  • ✗ Usar mono font para texto corrido
  • ✗ Misturar pesos sem hierarquia (bold + bold + bold)
  • ✗ Labels em minusculas sem tracking
  • ✗ Fontes decorativas ou serif